<template>
  <view class="cart-container">

    <uni-swipe-action>
      <block v-for="goods in cart" :key="goods.goods_id">
        <uni-swipe-action-item :right-options="options" @click="swipeActionClickHandler(goods)">
          <!-- 在 radioChangeHandler 事件处理函数中，通过事件对象 e，得到商品的 goods_id 和 goods_state -->
          <my-goods :goods="goods" @radio-change="radioChangeHandler" @num-change="numberChangeHandler"></my-goods>
        </uni-swipe-action-item>
      </block>
    </uni-swipe-action>

    <my-settle :isCheckAll="isCheckAll" :totalPrice="totalPrice" @checkAll-change="() => isCheckAll = !isCheckAll"></my-settle>
  </view>
</template>

<script>
import myGoods from "@/components/my-goods.vue";
import mySettle from "@/components/my-settle.vue";
export default {
  data() {
    return {
      cart: [
        {
          "goods_id": 57335,
          "goods_name": "美固MOBICOOL车载冰箱 T07-DC 车家两用冷热箱、食品、药品、化妆品都能带上了、本款产品内不含家用电源。",
          "goods_price": 278,
          "goods_count": 1,
          "goods_small_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_1_400x400.jpg",
          "goods_state": true
        },
        {
          "goods_id": 17927,
          "goods_name": "小米（MI）小米电视4 2GB+8GB 55英寸四核64位高性能处理器智能平板电视",
          "goods_price": 4099,
          "goods_count": 1,
          "goods_small_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0070141413-000000000623824255_1_400x400.jpg",
          "goods_state": true
        },
        {
          "goods_id": 51663,
          "goods_name": "小米手机 小米4移动标准版 （黑色）（3G RAM+16G ROM）",
          "goods_price": 499,
          "goods_count": 2,
          "goods_small_logo": "http://image5.suning.cn/uimg/b2c/newcatentries/0070124822-000000000125279336_1_400x400.jpg",
          "goods_state": true
        }
      ],
      options: [{
        text: "删除",
        style: {
          backgroundColor: "#C00000"
        }
      }]
    }
  },
  components: {
    myGoods,
    mySettle
  },
  computed: {
    isCheckAll: {
      get(){
        return this.cart.every(item => item.goods_state)
      },
      set(value){
        this.cart.forEach(item => item.goods_state = value)
      }
    },

    totalPrice() {
      return this.cart.reduce((prev, current) => {
        let num = current.goods_state ? (current.goods_count * current.goods_price) : 0
        return prev + num
      }, 0)
    }
  },
  methods: {
    // 单选点击事件
    radioChangeHandler(obj) {
      this.cart = this.cart.map(ele => {
        if (obj.goods_id == ele.goods_id) {
          ele.goods_state = obj.goods_state
        }
        return ele
      })
    },
    // 数量增加、减少
    numberChangeHandler(obj) {
      this.cart = this.cart.map(ele => {
        if (obj.goods_id == ele.goods_id) {
          ele.goods_count = obj.goods_count
        }
        return ele
      })
    },
    // 滑动删除事件
    swipeActionClickHandler(goods) {
      this.cart = this.cart.filter((item) => item.goods_id != goods.goods_id)
    }
  }
};
</script>

<style scoped>
.cart-container {
  padding-bottom: 50px;
}
</style>